import { useState } from 'react'
import { Button } from 'antd-mobile'
import { LeftOutline, CheckOutline } from 'antd-mobile-icons'
import { useNavigate, useParams } from 'react-router-dom'
import http from '../../api/index'
import style from './index.module.css'
function Index() {
  const navigate = useNavigate()
  const [selectedPayment, setSelectedPayment] = useState('wechat')
  const { price } = useParams()
  const handlePayment = async () => {
    // 处理支付逻辑
    console.log('开始支付')
    const res = await http.get('/api/pay', {
      params: {
        price: price,
        id: Date.now(),
        title: '极速图文咨询'
      }
    })
    window.location.href = res.data.result
  }
  return (
    <div className={style.paymentContainer}>
      {/* 头部导航 */}
      <div className={style.header}>
        <div className={style.headerLeft}>
          <LeftOutline onClick={() => navigate(-1)} />
        </div>
        <div className={style.headerTitle}>收银台</div>
        <div className={style.headerRight}>
          <span className={style.headerIcon}>⋯</span>
          <span className={style.headerIcon}>−</span>
          <span className={style.headerIcon}>◎</span>
        </div>
      </div>
      {/* 支付金额 */}
      <div className={style.paymentAmount}>
        <div className={style.amountLabel}>请支付金额</div>
        <div className={style.amountValue}>¥{price}</div>
      </div>
      {/* 服务信息 */}
      <div className={style.serviceInfo}>
        <div className={style.serviceItem}>
          <span className={style.serviceLabel}>服务类型:</span>
          <span className={style.serviceValue}>极速图文咨询</span>
        </div>
        <div className={style.serviceItem}>
          <span className={style.serviceLabel}>服务医生:</span>
          <span className={style.serviceValue}>不指定</span>
        </div>
        <div className={style.serviceItem}>
          <span className={style.serviceLabel}>服务价格:</span>
          <span className={style.serviceValue}>¥{price}/次</span>
        </div>
      </div>
      {/* 支付方式选择 */}
      <div className={style.paymentMethod}>
        <div className={style.paymentMethodTitle}>请选择支付方式</div>
        <div
          className={`${style.paymentOption} ${selectedPayment === 'wechat' ? style.selected : ''}`}
          onClick={() => setSelectedPayment('wechat')}
        >
          <div className={style.paymentOptionLeft}>
            <div className={style.wechatIcon}>💬</div>
            <span className={style.paymentOptionText}>支付宝</span>
          </div>
          {selectedPayment === 'wechat' && (
            <CheckOutline className={style.checkIcon} />
          )}
        </div>
      </div>
      {/* 支付按钮 */}
      <div className={style.paymentButtonContainer}>
        <Button
          block
          color='primary'
          size='large'
          className={style.paymentButton}
          onClick={handlePayment}
        >
          立即支付
        </Button>
      </div>
    </div>
  )
}
export default Index